import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Row, Col, Button, Icon, Divider, Timeline } from 'antd';
import Authorized from '@/utils/Authorized';
import router from 'umi/router';
import styles from './index.less';
import advertiseDefault from '@/assets/m1-1-default.jpg';

@connect(({ competition }) => ({
  competition: competition.competition
}))
class Publicity extends PureComponent {

  componentDidMount() {
    const { match: { params: { id } }, dispatch } = this.props;
    dispatch({
      type: 'competition/getCompetitionDetail',
      payload: {
        competitionId: id,
      }
    })
  }

  getUrl() {
    const { competition } = this.props;
    if (competition && competition.advertisePictureVo) {
      return `http://localhost:8080/image/${competition.advertisePictureVo.advertisePictureBig}`;
    }
    const url = advertiseDefault;
    return url;
  }

  handleClick = () => {
    const { match: { params: { id } } } = this.props;
    router.push(`/preview/competition/${id}/enroll`)
  }

  render() {
    const { match: { params: { id } }, competition } = this.props;
    console.log(competition)
    return (
      <div>
        <div style={{ position: `relative` }}>
          <img alt="advertise" style={{ width: '100%', height: 430 }} src={this.getUrl()} />
          <span style={{ textAlign: "center", height: 100, width: 800, position: `absolute`, bottom: `35%`, left: `25%`, color: `#FFFFFF`, fontWeight: "bold", fontSize: 50 }}>{competition && competition.competitionInformationVo && competition.competitionInformationVo.name}</span>
        </div>
        <div className={styles.join}>
          <Row type="flex" justify="center">
            <Col span={4}>
              <Divider className={styles.leftDivider} />
            </Col>
            <Col span={4} style={{ textAlign: `center` }}>
              <Authorized authority="admin">
                <Button style={{ width: 200, height: 56 }} type="primary" shape="round" icon="fullscreen-exit" size='large'>我要参加</Button>
              </Authorized>
              <Authorized authority="user">
                <Button onClick={this.handleClick} style={{ width: 200, height: 56 }} type="primary" shape="round" icon="fullscreen-exit" size='large'>我要参加</Button>
              </Authorized>
            </Col>
            <Col span={4}>
              <Divider className={styles.rightDivider} />
            </Col>
          </Row>
        </div>
        <Row gutter={24} type="flex" justify="center">
          <Col span={20}>
            <Card bordered={false} style={{ backgroundImage: `linear-gradient(to right, #1890ff 0%, #6f86d6 100%)`, margin: 20 }}>
              <span style={{ fontSize: 24, color: `white` }}>竞赛介绍</span>
            </Card>
          </Col>
        </Row>
        <Row gutter={24} type="flex" justify="center">
          <Col span={14}>
            <Card bordered={false} style={{ marginLeft: 20, padding: 24 }}>
              <Row type="flex" justify="center">
                <Col span={8}>
                  <Divider className={styles.leftDivider} />
                </Col>
                <Col span={4} style={{ textAlign: `center`, fontSize: 20 }}>
                  <Icon style={{ fontSize: 20 }} type="profile" />
                  <h3 style={{ display: `inline`, marginLeft: 5 }}>赛事简介</h3>
                </Col>
                <Col span={8}>
                  <Divider className={styles.rightDivider} />
                </Col>
              </Row>
              <Row>
                <p style={{ fontSize: 17 }} dangerouslySetInnerHTML={{ __html: competition && competition.competitionInformationVo && competition.competitionInformationVo.competitionIntroduction }} />
              </Row>
            </Card>
            <Card bordered={false} style={{ marginLeft: 20, marginTop: 20, padding: 25 }}>
              <Row type="flex" justify="center">
                <Col span={8}>
                  <Divider className={styles.leftDivider} />
                </Col>
                <Col span={4} style={{ textAlign: `center`, fontSize: 20 }}>
                  <Icon type="message" />
                  <h3 style={{ display: `inline`, marginLeft: 5 }}>联系方式</h3>
                </Col>
                <Col span={8}>
                  <Divider className={styles.rightDivider} />
                </Col>
              </Row>
              <div style={{ fontSize: 24 }}>
                <Row>
                  <Icon type="user" /> <span style={{ marginLeft: 10 }}>{competition && competition.contactVo && competition.contactVo.name}</span>
                </Row>
                <Row>
                  <Icon type="phone" /> <span style={{ marginLeft: 10 }}>{competition && competition.contactVo && competition.contactVo.phone}</span>
                </Row>
                <Row>
                  <Icon type="mail" /> <span style={{ marginLeft: 10 }}>{competition && competition.contactVo && competition.contactVo.mail}</span>
                </Row>
                <Row>
                  <Icon type="trademark" /> <span style={{ marginLeft: 10 }}>{competition && competition.contactVo && competition.contactVo.contactExplain}</span>
                </Row>
                <Row>
                  <Icon type="qq" /> <span style={{ marginLeft: 10 }}>{competition && competition.contactVo && competition.contactVo.qq}</span>
                </Row>
                <Row>
                  <Icon type="wechat" /> <span style={{ marginLeft: 10 }}>{competition && competition.contactVo && competition.contactVo.wechat}</span>
                </Row>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card bordered={false} style={{ marginRight: 20 }}>
              <Row style={{ padding: 10 }}>
                <div style={{ fontSize: 20 }}>
                  <Divider style={{ width: 4, height: 20, backgroundImage: `linear-gradient(to bottom, #accbee 0%, #e7f0fd 100%)` }} type="vertical" />
                  <span>竞赛时间表</span>
                </div>
                <Divider />
                <Timeline>
                  <Timeline.Item color="green">竞赛开始时间 {competition && competition.competitionInformationVo && competition.competitionInformationVo.competitionStartDate.slice(0, 10)}</Timeline.Item>
                  <Timeline.Item color="green">报名开始时间 {competition && competition.competitionInformationVo && competition.competitionInformationVo.enrollStartDate.slice(0, 10)}</Timeline.Item>
                  
                  <Timeline.Item color="red">报名结束时间 {competition && competition.competitionInformationVo && competition.competitionInformationVo.enrollEndDate.slice(0, 10)}</Timeline.Item>
                  <Timeline.Item color="red">竞赛结束时间 {competition && competition.competitionInformationVo && competition.competitionInformationVo.competitionEndDate.slice(0, 10)}</Timeline.Item>
                </Timeline>
              </Row>
              <Row style={{ padding: 10 }}>
                <div style={{ fontSize: 20 }}>
                  <Divider style={{ width: 4, height: 20, backgroundImage: `linear-gradient(to bottom, #accbee 0%, #e7f0fd 100%)` }} type="vertical" />
                  <span>主办单位</span>
                </div>
                <Divider style={{ height: 1.9 }} />
                <div style={{ fontSize: 18, marginLeft: 15 }}>
                  <span>· {competition && competition.organizerVo && competition.organizerVo.sponsor}</span>
                </div>
              </Row>
              <Row style={{ padding: 10 }}>
                <div style={{ fontSize: 20 }}>
                  <Divider style={{ width: 4, height: 20, backgroundImage: `linear-gradient(to bottom, #accbee 0%, #e7f0fd 100%)` }} type="vertical" />
                  <span>承办单位</span>
                </div>
                <Divider style={{ height: 1.9 }} />
                <div style={{ fontSize: 18, marginLeft: 15 }}>
                  <span>· {competition && competition.organizerVo && competition.organizerVo.organizer}</span>
                </div>
              </Row>
              <Row style={{ padding: 10 }}>
                <div style={{ fontSize: 20 }}>
                  <Divider style={{ width: 4, height: 20, backgroundImage: `linear-gradient(to bottom, #accbee 0%, #e7f0fd 100%)` }} type="vertical" />
                  <span>协办单位</span>
                </div>
                <Divider style={{ height: 1.9 }} />
                <div style={{ fontSize: 18, marginLeft: 15 }}>
                  <span>· {competition && competition.organizerVo && competition.organizerVo.coOrganizer}</span>
                </div>
              </Row>
            </Card>
          </Col>
        </Row>
      </div>
    )
  }

}
export default Publicity
